<template>
  <el-dialog :title="$t('modules.report.generate_report')" width="40%">
    <el-form ref="generateReport" :model="reportForm" label-position="top" :rules="rules">
      <el-form-item :label="$t('common.month') + ':'" prop="month">
        <el-date-picker
          v-model="reportForm.month"
          type="month"
          :placeholder="$t('common.month')"
          format="YYYY-MM"
          value-format="yyyyMM"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item :label="$t('common.customer_name') + ':'">
        <el-input
          ref="name"
          v-model="reportForm.userName"
          autocomplete="off"
          clearable
          :placeholder="$t('common.customer_name')"
          @clear="clearCustomerName"
          @focus="openCustomerList"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button text @click="close">{{ $t("common.cancel") }}</el-button>
        <el-button
          v-permission="{ permission: '10401004.MANAGE' }"
          type="primary"
          :loading="confirmRegenerateLoading"
          @click="generateReport"
          >{{ $t("common.confirm") }}</el-button
        >
      </span></template
    >
    <customer-list
      ref="customerList"
      v-model="getUserNameVisible"
      @confirmSelect="confirmUserName"
    />
  </el-dialog>
</template>
<script>
import CustomerList from "@/views/service-management/components/customer-list";
import { regenerateReport } from "@/api/report";

export default {
  name: "GenerateReport",
  components: {
    CustomerList,
  },
  data() {
    return {
      confirmRegenerateLoading: false,
      getUserNameVisible: false,
      reportForm: {
        month: "",
        userName: "",
        characterCode: "",
        keyId: "",
      },
      rules: {
        month: [
          {
            required: true,
            message: this.$t("flycare.input_require.month"),
            trigger: ["blur"],
          },
        ],
      },
    };
  },
  methods: {
    init() {},
    close() {
      this.$emit("update:model-value", false);
      this.reportForm.month = "";
      this.clearCustomerName();
      this.$refs.generateReport.clearValidate();
    },
    confirmUserName(detail) {
      this.reportForm.userName = detail.name;
      this.reportForm.characterCode = "OPERATOR";
      this.reportForm.keyId = detail.keyId;
      this.getUserNameVisible = false;
    },
    clearCustomerName() {
      this.reportForm.userName = "";
      this.reportForm.characterCode = "";
      this.reportForm.keyId = "";
    },
    openCustomerList() {
      this.getUserNameVisible = true;
      this.$nextTick(() => {
        this.$refs.customerList.openDialog();
      });
    },
    // 手动生成report
    generateReport() {
      this.$refs["generateReport"].validate((valid) => {
        if (valid) {
          // 加个确认
          this.$confirm(this.$t("tip_content.generate_report"), {
            confirmButtonText: this.$t("common.confirm"),
            cancelButtonText: this.$t("common.cancel"),
            type: "warning",
          })
            .then(() => {
              const data = {
                characterCode: this.reportForm.characterCode,
                keyId: this.reportForm.keyId,
                month: this.reportForm.month,
              };
              this.confirmRegenerateLoading = true;
              regenerateReport(data)
                .then((res) => {
                  this.$message.success(this.$t("common.success"));
                  this.getReportVisible = false;
                  this.confirmRegenerateLoading = false;
                  for (const key in this.reportForm) {
                    this.reportForm[key] = "";
                  }
                  this.close();
                  this.$emit("refresh");
                })
                .catch((err) => {
                  this.$message.error(err.message);
                })
                .finally(() => {
                  this.confirmRegenerateLoading = false;
                });
            })
            .catch((e) => {});
        }
      });
    },
  },
};
</script>
